<template>
  <transition name="el-zoom-in-center">
    <div class="JADP-preview-main user-form">
      <div class="JADP-common-page-header">
        <el-page-header
          @back="goBack"
          :content="!dataForm.id ? $t(`user.addUser`) : $t(`user.editUser`)"
        />
        <div class="options">
          <el-button
            type="primary"
            :loading="btnLoading"
            @click="handleConfirm()"
          >
            {{ $t("common.confirmButton") }}</el-button
          >
          <el-button @click="goBack"
            >{{ $t("common.cancelButton") }}
          </el-button>
        </div>
      </div>
      <div
        class="main"
        v-loading="formLoading"
        :element-loading-text="$t('common.loadingText')"
      >
        <el-form
          ref="dataForm"
          :model="dataForm"
          :rules="dataRule"
          label-width="80px"
        >
          <div class="JADP-common-title mb-20">
            <h2 class="bold">学员基础信息</h2>
          </div>
          <el-row :gutter="20" class="custom-row">
            <el-col :sm="12" :xs="24">
              <el-form-item label="证件类型" prop="certificatesType">
                <el-select
                  v-model="dataForm.certificatesType"
                  placeholder="选择证件类型"
                >
                  <el-option
                    v-for="item in certificatesTypeTreeData"
                    :key="item.id"
                    :label="item.fullName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="证件号码" prop="certificatesNumber">
                <el-input
                  v-model="dataForm.certificatesNumber"
                  placeholder="证件号码"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="账户" prop="account">
                <el-input v-model="dataForm.account" placeholder="账户名称" />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="姓名" prop="realName">
                <el-input v-model="dataForm.realName" placeholder="真实姓名" />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="性别" prop="gender">
                <el-select v-model="dataForm.gender" placeholder="选择性别">
                  <el-option
                    v-for="item in genderTreeData"
                    :key="item.enCode"
                    :label="item.fullName"
                    :value="item.enCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="手机号码" prop="mobilePhone">
                <el-input
                  v-model="dataForm.mobilePhone"
                  placeholder="手机号码"
                />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="单位名称" prop="nickName">
                <el-input v-model="dataForm.nickName" placeholder="单位名称" />
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="单位类型" prop="">
                <el-select v-model="dataForm.gender" placeholder="选择单位类型">
                  <el-option
                    v-for="item in genderTreeData"
                    :key="item.enCode"
                    :label="item.fullName"
                    :value="item.enCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="人员类型" prop="">
                <el-select v-model="dataForm.gender" placeholder="选择人员类型">
                  <el-option
                    v-for="item in genderTreeData"
                    :key="item.enCode"
                    :label="item.fullName"
                    :value="item.enCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="科室/部门" prop="language">
                <el-input v-model="dataForm.language" placeholder="科室/部门" />
              </el-form-item>
            </el-col>

            <el-col :sm="12" :xs="24">
              <el-form-item label="学历" prop="education">
                <el-select v-model="dataForm.education" placeholder="选择学历">
                  <el-option
                    v-for="item in educationTreeData"
                    :key="item.id"
                    :label="item.fullName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :sm="12" :xs="24">
              <el-form-item label="职称" prop="theme">
                <el-input v-model="dataForm.theme" placeholder="职称" />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="JADP-common-title mb-20">
            <h2 class="bold">审核附件</h2>
          </div>
          <el-row :gutter="20" class="custom-row">
            <el-col :span="24">
              <el-form-item label="登记表附件" prop="signature">
                <JADP-UploadFz
                  v-model="signature"
                  :fileSize="500"
                  sizeUnit="MB"
                  :limit="9"
                  buttonText="点击上传"
                  showTip
                  accept=".xls, .xlsx, .docx, .zip, .pdf,"
                >
                </JADP-UploadFz>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="学历证明附件" prop="">
                <JADP-UploadFz
                  v-model="positionId"
                  :fileSize="500"
                  sizeUnit="MB"
                  :limit="9"
                  buttonText="点击上传"
                  showTip
                  accept=".xls, .xlsx, .docx, .zip, .pdf,"
                >
                </JADP-UploadFz>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="身份证附件" prop="portalId">
                <JADP-UploadFz
                  v-model="portalId"
                  :fileSize="500"
                  sizeUnit="MB"
                  :limit="9"
                  buttonText="点击上传"
                  showTip
                  accept=".xls, .xlsx, .docx, .zip, .pdf,"
                >
                </JADP-UploadFz>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="2寸照片" prop="headIcon">
                <el-upload
                  class="avatar-uploader"
                  :action="define.comUploadUrl + '/userAvatar'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  accept="image/*"
                >
                  <img
                    v-if="dataForm.headIcon"
                    :src="define.comUrl + dataForm.headIcon"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="审核意见" prop="description">
                <el-input
                  v-model="dataForm.description"
                  type="textarea"
                  :rows="6"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </transition>
</template>

<script>
import { getDepartmentSelector } from "@/api/permission/department";
import { getPositionSelector } from "@/api/permission/position";
import { getRoleSelector } from "@/api/permission/role";
import { createUser, updateUser, getUserInfo } from "@/api/permission/user-za";

export default {
  data() {
    return {
      visible: false,
      btnLoading: false,
      dataForm: {
        id: "",
        sortCode: 0,
        enabledMark: 1,
        account: "",
        realName: "",
        organizeId: "",
        managerId: "",
        positionId: "",
        roleId: "",
        description: "",
        headIcon: "",
        gender: null,
        nationId: "",
        nativePlace: "",
        entryDate: Number,
        certificatesType: "",
        certificatesNumber: "",
        education: "",
        birthday: Number,
        telePhone: "",
        landline: "",
        mobilePhone: "",
        email: "",
        urgentContacts: "",
        urgentTelePhone: "",
        postalAddress: "",
      },
      roleId: [],
      departmentTreeData: [],
      positionTreeData: [],
      roleTreeData: [],
      genderTreeData: [],
      nationTreeData: [],
      educationTreeData: [],
      certificatesTypeTreeData: [],
      formLoading: false,
      genderProps: {
        value: "enCode",
        label: "fullName",
      },
      dataRule: {
        account: [
          { required: true, message: "请输入账户名称", trigger: "blur" },
          {
            validator: this.formValidate(
              "userAccount",
              "账户名称只能是数字英文"
            ),
            trigger: "blur",
          },
          { max: 50, message: "账户名称最多为50个字符！", trigger: "blur" },
        ],
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          {
            validator: this.formValidate(
              "fullName",
              "真实姓名不能含有特殊符号"
            ),
            trigger: "blur",
          },
          { max: 50, message: "真实姓名最多为50个字符！", trigger: "blur" },
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        organizeId: [
          { required: true, message: "请选择部门", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    init(id, organizeId) {
      this.visible = true;
      this.dataForm.id = id || "";
      this.roleId = [];
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();

        // 获取公司+部门
        getDepartmentSelector(this.$store.getters.organizeId).then((res) => {
          this.departmentTreeData = res.data.list;
        });

        // 获取岗位
        getPositionSelector(this.$store.getters.organizeId).then((res) => {
          this.positionTreeData = res.data.list;
        });

        // 获取角色
        getRoleSelector(this.$store.getters.organizeId).then((res) => {
          this.roleTreeData = res.data.list;
        });

        // 获取民族
        this.$store
          .dispatch("base/getDictionaryData", { sort: "Nation" })
          .then((res) => {
            this.nationTreeData = res;
          });

        // 获取学历
        this.$store
          .dispatch("base/getDictionaryData", { sort: "Education" })
          .then((res) => {
            this.educationTreeData = res;
          });

        // 获取证件类型
        this.$store
          .dispatch("base/getDictionaryData", { sort: "certificateType" })
          .then((res) => {
            this.certificatesTypeTreeData = res;
          });

        // 获取性别
        this.$store
          .dispatch("base/getDictionaryData", { sort: "sex" })
          .then((res) => {
            this.genderTreeData = res;
          });

        if (this.dataForm.id) {
          this.formLoading = true;
          getUserInfo(this.dataForm.id,this.$store.getters.organizeId)
            .then((res) => {
              this.dataForm = res.data;
              if (this.dataForm.roleId)
                this.roleId = this.dataForm.roleId.split(",");
              this.formLoading = false;
            })
            .catch(() => (this.formLoading = false));
        } else {
          this.dataForm.organizeId = organizeId;
        }
      });
    },
    goBack() {
      this.$emit("close");
    },
    roleIdChange() {
      this.dataForm.roleId = this.roleId.toString();
    },
    handleAvatarSuccess(res) {
      if (res.code === 200 && res.data && res.data.url) {
        this.dataForm.headIcon = res.data.url;
      } else {
        this.$message.error("头像上传失败");
      }
    },
    handleConfirm() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          const formMethod = this.dataForm.id ? updateUser : createUser;
          formMethod(this.dataForm)
            .then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.btnLoading = false;
                  this.$emit("close", true);
                },
              });
            })
            .catch(() => {
              this.btnLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.user-form {
  .main {
    padding: 10px 30px 0;
  }
  >>> .el-select,
  >>> .el-date-editor {
    width: 100%;
  }
  >>> .avatar-uploader {
    .el-upload {
      border: 1px dashed #dcdfe6;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .el-upload:hover {
      border-color: #409eff;
    }
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
  }
  .avatar {
    width: 130px;
    height: 130px;
    display: block;
  }
}
</style>
